<template>
    <div v-if="selectedNode" class="node-properties">
        <h4>📝 节点配置</h4>
        <el-form :model="selectedNode" label-width="80px" size="small">
            <el-form-item label="节点名称">
                <el-input v-model="selectedNode.title" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="selectedNode.subtitle" />
            </el-form-item>

            <!-- 根据节点类型显示不同配置 -->
            <div v-if="selectedNode.type === 'trigger'">
                <el-form-item label="触发条件">
                    <el-select v-model="selectedNode.config.trigger" style="width: 100%">
                        <el-option label="时间触发" value="schedule" />
                        <el-option label="文件上传" value="file_upload" />
                        <el-option label="用户注册" value="user_register" />
                        <el-option label="邮件接收" value="email_received" />
                    </el-select>
                </el-form-item>
            </div>

            <div v-if="selectedNode.type === 'condition'">
                <el-form-item label="条件表达式">
                    <el-input v-model="selectedNode.config.expression" type="textarea" :rows="3"
                        placeholder="例如: user.age > 18 && user.status === 'active'" />
                </el-form-item>
            </div>

            <div v-if="selectedNode.type === 'action'">
                <el-form-item label="执行动作">
                    <el-select v-model="selectedNode.config.action" style="width: 100%">
                        <el-option label="发送邮件" value="send_email" />
                        <el-option label="发送短信" value="send_sms" />
                        <el-option label="创建任务" value="create_task" />
                        <el-option label="调用API" value="call_api" />
                    </el-select>
                </el-form-item>
            </div>

            <el-form-item>
                <el-button type="primary" size="small" @click="onSave">保存配置</el-button>
                <el-button size="small" @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    selectedNode: {
        type: Object,
        default: null
    }
});

const emit = defineEmits(['save', 'cancel']);

const onSave = () => {
    emit('save');
};

const onCancel = () => {
    emit('cancel');
}
</script>

<style scoped>
.node-properties {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-top: 20px;
}

.node-properties h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}
</style>